<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123</li>
        <li>321</li>
        <li>456</li>
        <li>654</li>
    </ul>
    <script>
        //1. ...展开
        let arr = [1, 2, 3]

        //let arr2 = arr.concat()
        // let arr2 = [...arr] //实现浅拷贝
        // arr2.pop() //删除arr2中的元素，arr并不会受影响
        // console.log(arr, arr2)

        let arr2 = [4, 5, 6]
        console.log(...arr, ...arr2) // 1 2 3 4 5 6

        let myarr = [1, 2, 3, 4, 5, 6, 7, 8]
        let [a, b, ...c] = myarr
        console.log(a, b, c) //1 2 [3,4,5,6,7,8]

        //2. Array.from()：用于将一个类似数组的对象转换成数组
        function test() {
            //console.log(arguments) //[1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            console.log(Array.from(arguments)) //[1,2,3,4]
        }
        test(1, 2, 3, 4)

        let olis = document.querySelectorAll("li")
        console.log(Array.from(olis)); //[li,li,li,li]

        //3. Array.of()：将一组值转化为数组，也就是新建数组
        let arr3 = Array(3)
        let arr4 = Array.of(3)
        console.log(arr3, arr4) //[empty×3] [3]

        //4. find() findIndex()
        let arr5 = [11, 12, 13, 14, 15]
        //找到大于13的元素
        let res = arr5.find(function (item) {
            return item > 13
        })
        console.log(res) //14
        //找到大于13的那个元素的下标
        let index = arr5.findIndex(function (item) {
            return item > 13
        })
        console.log(index) //3

        //5. findLast() findLastIndex()  ES2022
        //这两个方法与前面两个方法类似，不过是从后面开始查找
        let index1 = arr5.findLastIndex(function (item) {
            return item > 13
        })
        console.log(index1) //4

        //6. fill()：填充数组元素的值
        let arr6 = new Array(3).fill("twj")
        console.log(arr6) //index
        let arr7 = [11, 22, 33]
        console.log(arr7.fill('twj', 1, 2)) //index

        //7. flat() flatMap()：扁平化处理，将嵌套数组拉伸成一维数组
        let arr8 = [1, 2, 3, [4, 5, 6]]
        let arr9 = arr8.flat()
        console.log(arr9) //[1, 2, 3, 4, 5, 6]

        //复杂的多维数组可通过flatMap来处理
        let arr10 = [
            {
                name: "A",
                list: ["安庆", "安阳", "鞍山"]
            },
            {
                name: "B",
                list: ["北京", "保定", "包头"]
            }
        ]
        let res1 = arr10.flatMap(function (item) {
            return item.list
        })
        console.log(res1) //['安庆', '安阳', '鞍山', '北京', '保定', '包头']

    </script>
</body>

</html>